<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="./js/vue.js">
        Vue.config.productionTip = false   
    </script>
</head>

<body>
    <div id="root">
        <!-- 单项数据绑定 v-bind: -->
        单项数据绑定：<input type="text" v-bind:value="name"><br>
        <!-- 双项数据绑定 v-model:  只能用在表单类，一定要有value值-->
        双项数据绑定：<input type="text" v-model:value="name">

        <!-- 简写 -->
        <p>--------------------------</p>
        单项数据绑定：<input type="text" :value="name"><br>
        双项数据绑定：<input type="text" v-model="name">
    </div>

    <script>

/*         const v = new Vue({
            el: '#root',//第一种写法 对象式
            data: {
                name: '尚硅谷'
            }   
        })
        console.log(V);
        V.$mount('#root')//第2种写法 */


        //data的第二种写法   函数式
        new Vue({
            el:'#root',
            data() {
               return{
                name:'尚硅谷'
               }
            }
        })

    </script>
</body>

</html>